export default class extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      info: "",
      name: "",
      age: 0,
      mobile: "",
      level: "",
      gender: 1,
      fav: [],
    };
  }
  submit1() {
    const data = {
      name: document.getElementById("name").value,
      age: this.refs.age.value,
      info: this.state.info,
      mobile: window.mobile,
    };
    console.log("提交表单", data);
  }

  submit2() {
    console.log("提交表单", this.state);
  }

  render() {
    const { info, name, age, mobile, level, gender, fav } = this.state;
    return (
      <div>
        <h2>form</h2>
        {/* 以下五种写法都是非受控表单 */}
        <div>
          <span>姓名：</span>
          <input type="text" id="name" />
          <br />
          <span>年龄：</span>
          <input type="number" ref="age" />
          <br />
          <span>介绍：</span>
          <textarea
            cols="30"
            rows="3"
            defaultValue={info}
            onInput={(ev) => this.setState({ info: ev.target.value })}
          />
          <br />
          <span>手机：</span>
          <input
            type="number"
            onInput={(ev) => (window.mobile = ev.target.value)}
          />
          <br />
          <span>头像：</span>
          <input type="file" />
          <br />
          <button onClick={() => this.submit1()}>提交</button>
        </div>

        {/* 以下五种写法都是受控表单 */}
        <div>
          <span>姓名：</span>
          <input
            type="text"
            id="name"
            name="name"
            value={name}
            onChange={(ev) => this.change(ev)}
          />
          <br />
          <span>年龄：</span>
          <input
            type="number"
            id="age"
            name="age"
            value={age}
            onChange={(ev) => this.change(ev)}
          />
          <br />
          <span>介绍：</span>
          <textarea
            name="info"
            cols="30"
            rows="3"
            value={info}
            onChange={(ev) => this.change(ev)}
          ></textarea>
          <br />
          <span>学历：</span>
          <select name="level" value={level} onChange={(ev) => this.change(ev)}>
            {[]}
          </select>
        </div>
      </div>
    );
  }
}
